<template>
    <div class="mg-tb">
        <!--图片分类-->
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidht+'px'}">
                <li @click="getimages(0)">全部</li>
                <li v-for="(item,index) in cates" :key="index" @click="getimages(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!--图片列表-->
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <router-link v-bind="{to:'/picture/pictureinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            ulWidht: 320,
            cates: [],    //存放图片分类数据的数组
            list: []
        }
    },
    created() {
        var cateid = 0;
        this.getcates();
        this.getimages(cateid);
    },
    methods: {
        getimages(cateid) {
            //如果方法的cateid没有传参则默认是0，代表获取所有图片
            cateid = cateid || 0;
            //获取url
            var url = "http://182.254.146.100:8899/api/getimages/" + cateid;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }

                this.list = body.message;
            })
        },
        getcates() {
            //1.确定url
            var url = 'http://182.254.146.100:8899/api/getimgcategory/';
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }

                this.cates = body.message;

                // 实现当前分类的ul总宽度
                var w = 63;
                var count = body.message.length + 1;
                this.ulWidht = w * count;
            })
        }
    }
}
</script>

<style scoped>
/*图片分类*/

#cate {
    max-width: 375;
    overflow-x: auto;
    width: 375;
}

#cate ul {
    margin: 10;
    padding-left: 10px;
}

#cate li {
    list-style: none;
    display: inline-block;
    color: #099;
    font-size: 14px;
    padding-left: 7px;
}

#imglist {}

#imglist ul {
    padding-left: 0;
}

#imglist li {
    list-style: none;
    position: relative;
}

#imglist li img {
    width: 100%;
    /*height: 300px;*/
}

#desc {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    bottom: 0;
}

#desc h5,
#desc p {
    color: #fff;
    padding: 5px;
}

#desc h5 {
    font-weight: bolder;
    font-size: 16px;
    padding-bottom: 2px;
}

image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
}
</style>